<script setup>
import GameSimpleItem from "@/components/FrontComponents/GameSimpleItem.vue";
import {gameDiscountGetAPI} from "@/api/FrontApi/game.js";
import {ref, onMounted} from 'vue'
import {useRouter} from "vue-router";

const discountData = ref([])

const getDiscountData = async () =>  {
  const res = await gameDiscountGetAPI({})
  discountData.value = res.data
}

onMounted(() => getDiscountData())

const router = useRouter()
const more = () => {
  router.push('/store/discount')
}
</script>

<template>
  <div class="store-discount-game-panel">
    <div class="container">
      <div class="desc">
        <span class="title">特别优惠</span>
        <span class="more" @click="more">浏览更多</span>
      </div>
      <div class="discount-game">
        <div class="item" v-for="item in discountData" :key="item">
          <GameSimpleItem :game="item"></GameSimpleItem>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.store-discount-game-panel {
  margin: 40px 0;
  .container {
    .desc {
      display: flex;
      justify-content: space-between;
      .title {
        padding: 4px 6px;
        display: block;
        border-radius: 4px;
        background-color: $themeColor;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
      .more {
        padding: 4px 6px;
        display: block;
        border-radius: 4px;
        cursor: pointer;
        background-color: $secondaryColor;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        transition: all 0.3s;

        &:hover {
          box-shadow: 0 0 0 rgba(0, 0, 0, 0);
          color: #cccccc;
        }
      }
    }
    .discount-game {
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
